<template>
  <div>
    <el-card>
        <!--查询添加-->
        <el-row>
              <el-col :span="8">
                <el-input placeholder="请输入内容" clearable v-model="queryString" class="input-with-select" @clear="findPage">
                  <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                </el-input>
              </el-col>
        </el-row>
          <!--列表-->
        <el-table :data="tableList" stripe  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"  row-key="id" >
              <el-table-column type="expand">
                    <template slot-scope="scope" >
                        <div v-for="(item,index) in scope.row.pic" :index="(index+'')" :key="item.id" >
                            <el-image
                                v-if="item"
                                style="width: 200px;margin-left: 50px;"
                                :src="item"
                                :preview-src-list="preview(item)">
                            </el-image>
                        </div>
                    </template>
              </el-table-column>
              <el-table-column type="index" label="序号" />
              <el-table-column prop="content" label="反馈内容" />
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="danger" @click="deleteById(scope.row.id)"   size="small"  icon="el-icon-delete" circle/>
            </template>
          </el-table-column>
        </el-table>
          <!--底部分页条-->
        <el-pagination
          @size-change="handlePageSize"
          @current-change="handlePageNumber"
          :current-page="currentPage4"
          :page-sizes="[7, 25, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"/>

        </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
            queryInfo: {
              //页码
              pageNumber: 1,
              //页数
              pageSize: 7,
              //关键字
              queryString: ""
           },
           queryString:"",
            //表格数据
            tableList:[],
            //总记录数
            total: 0,
            currentPage4: 1,
    }
  },
  methods:{
      findPage(){
          this.queryInfo.queryString = this.queryString + "::user"
          this.$ajax.post("/feedback/findPage", this.queryInfo).then((res)=>{
              this.tableList = res.data.rows;
              this.total = res.data.total;
              console.log(res);
          });
      },
      preview(src){
            let arr = [];
            arr.push(src);
            return arr;
        },
        /*删除用户信息*/
        deleteById(id){
            this.$confirm('您将永久删除id是{' + id +' }的用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //调用后端删除用户接口
                this.$ajax.delete(`/feedback/delete/${id}`).then(res => {
                    this.$message.success(res.data.message);
                    this.queryInfo.pageNumber = 1;
                    this.findPage();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
  },
  created(){
    this.findPage();
  }
}
</script>

<style>

</style>